<template>
    <el-card class="form-card">
        <div slot="header">
            <!-- 导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/queryUserByCondition' }">用户管理</el-breadcrumb-item>
                <el-breadcrumb-item>编辑用户</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 导航 -->
        </div>
        <!-- 新增表单 -->
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="昵称：">
                <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="账号：">
                <el-input v-model="form.username" disabled></el-input>
            </el-form-item>
<!--            <el-form-item label="密码：">-->
<!--                <el-input v-model="form.password" disabled></el-input>-->
<!--            </el-form-item>-->
            <el-form-item label="角色分配：">
                <el-transfer
                    filterable
                    filter-placeholder="请输入角色名称"
                    :titles="['全部角色', '用户角色']"
                    :props="{
                      key: 'roleId',
                      label: 'roleName',
                      search: this.roleNames
                    }"
                    v-model="form.roleIds"
                    :data="roles">
                </el-transfer>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="onBack">返回</el-button>
            </el-form-item>
        </el-form>
        <!-- 新增表单 -->
    </el-card>


</template>

<script>
    import {
        addUser,
        getUserOfRoleInfoByUid,
        getUserOfRoleInfoByUsername,
        queryUserById,
        updateUser
    } from "../../../api/user"
    import {queryAllRole} from "../../../api/role";

    export default {
        name: "AddUser",
        data() {
            return {
                form: {
                    id: '',
                    uid: '',
                    username: '',
                    nickname: '',
                    // password: '',
                    roleIds: []
                },
                roles: [],          // 所有角色信息集合
                roleNames: [],      // 所有角色名称集合
            }
        },
        created() {
            this.form.id = this.$route.query.id
            this.loadAllRoleInfo()          // 加载系统内所有角色信息
            this.loadEditUserInfo()         // 加载编辑用户信息
        },
        methods: {
            loadAllRoleInfo() {     // 加载所有角色信息
                queryAllRole().then(res => {
                    this.roles = res.data.data
                    this.roles.forEach((role, index) => {
                        this.roleNames[index] = role.roleName   // 存放查询角色名称集合
                    })
                })
            },
            loadEditUserInfo() {    // 加载编辑用户信息
                queryUserById({
                    'id': this.form.id
                }).then(res => {
                    const data = res.data.data
                    this.form.username = data.username
                    this.form.nickname = data.nickname
                    this.form.uid = data.uid
                    this.loadUserOfRoleInfo()       // 加载编辑用户拥有角色信息
                })
            },
            loadUserOfRoleInfo() {  // 加载编辑用户的角色信息
                getUserOfRoleInfoByUsername({
                    'username': this.form.username
                }).then(res => {
                    this.form.roleIds = res.data.data
                })
            },
            onSubmit() {
                // 暂时只支持更新用户角色
                updateUser({
                    'id': this.form.id,
                    'uid':this.form.uid,
                    'nickname': this.form.nickname,
                    // 'password': this.form.password,
                    'roleIds': this.form.roleIds
                }).then(res => {
                    if(res.data.code == 200){
                        this.$message({
                            message: '更新用户成功',
                            type: 'success'
                        })
                        this.$router.push('/queryUserByCondition')
                    }else{
                        this.$message.error(res.data.msg)
                    }
                })
            },
            onBack() {
                this.$router.push('/queryUserByCondition')
            }
        }
    }
</script>

<style scoped>

</style>
